<template>
  <u-popup
    :show="show"
    :round="10"
    mode="center"
    bg-color="transparent"
    :safe-area-inset-bottom="false"
    :close-on-click-overlay="false"
    @close="onClose"
  >
    <image class="tip-content-wrap" :src="bgImg" @click="openClockIn" show-menu-by-longpress>
      <!-- <image :src="logo" class="img-header" />

      <view class="module">
        <view class="msg-wrap">
          <view class="title">{{ module.title }}</view>
          <view class="tip">
            <text>{{ module.text1 }}</text>
            <text class="count">{{ module.count }}</text>
            <text>{{ module.text2 }}</text>
          </view>
          <view class="tip">{{ module.text3 }}</view>
        </view>
        <image :src="module.icon" class="img-gift" />
      </view>

      <view class="clock-in-btn" @click="openClockIn">{{ btnText }}</view> -->
    </image>
    <div class="close-btn">
      <u-icon size="30" color="#FFF" name="close-circle" @click="onClose" />
    </div>
  </u-popup>
</template>

<script>
import {
  getImg,
  getCurrentPageConfigByName,
  execFn
} from '../../../utils/index'
export default {
  name: 'TipPopup',
  data() {
    return {
      show: false,
      bgImg: '',
      logo: '',
      btnText: '',
      redirectUrl: '',
      module: {
        title: '',
        text1: '',
        count: '',
        text2: '',
        text3: '',
        icon: ''
      }
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('打卡-弹窗').then(res => {
        console.log('打卡弹窗配置信息')
        console.log(res)
        const {
          bg_image,
          t_text1,
          t_text2,
          app_path_set_dt,
          url
        } = res
        _this.redirectUrl = url
        _this.bgImg = getImg(bg_image)
        // if (app_path_set_dt.length) {
        //   this.logo = getImg(app_path_set_dt[0].image)
        // }
        // this.btnText = t_text2
        // this.module.title = t_text1
        // if (app_path_set_dt[1]) {
        //   const {
        //     image,
        //     title,
        //     text1,
        //     text2,
        //     text3
        //   } = app_path_set_dt[1]
        //   this.module.icon = getImg(image)
        //   this.module.text1 = title
        //   this.module.count = text1
        //   this.module.text2 = text2
        //   this.module.text3 = text3
        // }
      })
    },

    onClose() {
      this.show = false
    },

    openClockIn() {
      this.redirectUrl && execFn(this.redirectUrl)
      // this.$utils.navigateToPage('/pagesClockIn/clockInSetting', 'fromPage=home')
    }
  }
}
</script>

<style lang="scss" scoped>
	.tip-content-wrap {
		width: 594rpx;
		height: 828rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 10rpx;

		.img-header {
			width: 100%;
			height: 350rpx;
			margin: auto;
		}

		.module {
			// width: 566rpx;
			width: 100%;
			height: 220rpx;
			margin: auto; // margin: 10rpx auto;
			@include flex-between;
			// padding: 10rpx 20rpx;
			border-radius: 10rpx;
			background-color: #FFF;

			.msg-wrap {
				flex: 1;
				@include flex-center;
				flex-flow: column;

				.title {
					font-size: 35rpx;
					font-weight: bolder;
					padding-bottom: 30rpx;
				}

				.count {
					font-size: 35rpx;
					font-weight: bolder;
					padding: 0 10rpx;
				}

				.tip {
					font-size: 25rpx;
					line-height: 40rpx;
				}
			}

			.img-gift {
				width: 65px;
				height: 65px;
				margin-right: 30rpx;
			}
		}

		.clock-in-btn {
			width: 394rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 60rpx auto 0;
			background-color: $theme-color;
			border-radius: 20rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bolder;

			&:active {
				opacity: 0.6;
			}
		}
	}

	.close-btn {
		width: 100%;
		margin-top: 50rpx;
		@include flex-center;
	}
</style>
